<template>
	<view class="transfer_config_box">
		<!-- 设备信息 -->
		<view class="dev">
			<text class="title_text">设备信息</text>
			<view class="dev_info_box">
				<!-- 设备名称 -->
				<view class="dev_name">
					<text class="label">设备编号：</text>
					<text class="value">D6901-DZ_9Q00N5369</text>
				</view>
			</view>
		</view>

		<!-- 参数列表 -->
		<view class="param">
			<text class="title_text">参数列表</text>
			<!-- 添加图标 -->
			<uv-icon name="plus-circle" size="24" color="#000000" class="add_icon" @click="addClick"></uv-icon>
			<uv-list :border="true">
				<uv-list-item v-for="(cpl,indexC) in transferConfigStore.currentParamList" :key="indexC" thumb-size="lg" :border="true" link @click="editClick(cpl)">
					<view class="content_box">
						<!-- <img src="" alt="" /> -->
						<text class="param_name">{{cpl.paramName}}</text>
					</view>
				</uv-list-item>
			</uv-list>
		</view>
		<view class="action_box">
		</view>
	</view>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
	name: 'TransferConfig'
})
</script>

<script setup>
import { useTransferConfigStore } from '../../stores/transferConfig.js'	
	
const transferConfigStore = useTransferConfigStore()
	
// 保存修改的点击事件
const saveClick = () => {
	console.log('保存')
}

// 添加按钮的点击事件
const addClick = () => {
	uni.navigateTo({
		url: '/pages/addParam/addParam'
		// url: '/pages/formPage1/formPage1'
	})
}

// 参数项的点击事件
const editClick = (cpl) => {
	// 将点击的项的数据单独拿出来
	transferConfigStore.currentEditParamInfo = cpl
	// 去修改页面
	uni.navigateTo({
		url: '/pages/editParam/editParam'
	})
}
</script>

<style lang="scss" scoped>
.transfer_config_box {
	width: 100vw;
	height: calc(100vh - 44px);
	box-sizing: border-box;
	// overflow-y: auto;
	background: #f3f3f3;
	padding-top: 6px;
	
	.title_text{
		font-weight: bold;
		margin: 6px 0px;
		display: inline-block;
		padding-left: 10px;
	}
	
	
	.dev{
		.dev_info_box{
			padding: 14px 10px 14px 10px;
			background-color: #ffffff;
			margin-bottom: 16px;
			
			.dev_name{
				.label{
					padding-left: 10px;
				}
				.value{}
			}
		}
	}
	
	.param{
		position: relative;
		
		.add_icon{
			position: absolute;
			top: 4px;
			right: 10px;
		}
	}
	
	.content_box {
		height: 50px;
		padding: 0px 16px 0px 20px;
		line-height: 50px;
		box-sizing: border-box;
	}

	.action_box {
		padding: 20px 20px;
		display: flex;
		flex-direction: column;

		.action_btn_item {
			margin-bottom: 20px;

			.btn_content {
				display: flex;
				flex-direction: row;
				padding: 10px 0px;

				text {
					font-size: 16px;
					margin-left: 8px;
				}
			}
		}
	}
}
</style>
